<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
        name="viewport">
  <title>微信公众号分享--测试页</title>
  <!-- 引入样式文件 -->
  <link href="https://unpkg.com/vant@2.5.8/lib/index.css" rel="stylesheet">

  <!-- 引入 Vue 和 Vant 的 JS 文件 -->
  <script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
  <script src="https://unpkg.com/vant@2.5.8/lib/vant.min.js"></script>
  <!-- axios -->
  <script src="https://unpkg.com/axios@0.19.2/dist/axios.min.js"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

</head>
<body>

<div id="app">
  <div v-html="successJson"></div>
</div>
<script>
    // 在 #app 标签下渲染一个组件
    new Vue({
        el: '#app',
        data() {
            return {
                successJson: ''
            }
        },
        mounted (){
            this.jsapiSign()
        },
        methods: {
            // 签名
            jsapiSign(){

                const toast = vant.Toast.loading({
                    duration: 0, // 持续展示 toast
                    forbidClick: true,
                    message: '签名中',
                });
                let url = window.location.href.split('#')[0]
                this.successJson += url + '<br/><hr/><hr/>'
                axios.get('/api/wx/mp/config/ywPersonalTest/jsapiSignature',{params:{url:url}}).then(res=>{
                    let data = res.data
                    this.successJson += JSON.stringify(data) + '<br/><hr/>'

                    this.wxReady()
                    this.wxConfig(data)
                }).catch(error=>{
                    this.successJson += JSON.stringify(error) + '<br/><hr/>'
                }).finally(()=>{
                    vant.Toast.clear();
                })
            },
            wxConfig(config){
                wx.config({
                    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: config.appId, // 必填，公众号的唯一标识
                    timestamp: config.timestamp, // 必填，生成签名的时间戳
                    nonceStr: config.nonceStr, // 必填，生成签名的随机串
                    signature: config.signature,// 必填，签名
                    jsApiList: ['updateAppMessageShareData'] // 必填，需要使用的JS接口列表
                });
            },
            wxReady (){
                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                wx.ready(function(){
                    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                    // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
                    wx.updateAppMessageShareData({
                        title: '这是一个测试分享页', // 分享标题
                        desc: '测试分享页测试分享页测试分享页', // 分享描述
                        link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/yqylBvLpModkBP2R3p6YAMv5h9r9WP5npkwLkibx25yuZJNVnkAXZN0AEib69jrcNWgMxAODDoX7Ngp7FW4FCiaQQ/0', // 分享图标
                        success: function () {
                            // 设置成功
                        }
                    })
                });
            }
        }
    });
</script>
</body>
</html>